<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        :style="{height:heights,overflowY:'hidden'}"
        v-model="value"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
    />
  </div>
</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {ref, shallowRef, onBeforeUnmount, unref} from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {getToken} from '@/util/Auth.ts';

const emits = defineEmits(['update:value'])
const props = defineProps({
  value: {
    type: String,
  },
  lang: {
    type: String,
    default: 'zh'
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  mode:{
    type: String,
    default: 'simple'
  },
  heights:{
    type: String,
    default: '300px'
  }
})
const {value, placeholder,mode,heights} = unref(props);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
//const mode = ref('default'); // 或 'simple'
const editorConfig = ref({
  placeholder: placeholder,
  MENU_CONF: {}
});
const toolbarConfig = ref({
  excludeKeys: ['fullScreen', 'emotion']
});
//上传图片
editorConfig.value.MENU_CONF['uploadImage'] = {
  server: '/api/sys/upload_img_editor',
  fieldName: 'editor-img',
  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 3 * 1024 * 1024, // 1M
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ['image/*'],
  metaWithUrl: false,
  // 自定义增加 http  header
  headers: {
    token: getToken()
  },
  // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒
}
//上传视频
editorConfig.value.MENU_CONF['uploadVideo'] = {
  server: '/api/sys/upload_video_editor',
  fieldName: 'editor-video',
  // 单个文件的最大体积限制，默认为 10M
  maxFileSize: 5 * 1024 * 1024, // 5M
  // 最多可上传几个文件，默认为 5
  maxNumberOfFiles: 3,
  // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ['video/*'],
  // 将 meta 拼接到 url 参数中，默认 false
  metaWithUrl: false,
  // 自定义增加 http  header
  headers: {
    token: getToken()
  },
  // 超时时间，默认为 30 秒
  timeout: 15 * 1000, // 15 秒
  // 视频不支持 base64 格式插入
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
 // 注册自定义菜单点击事件
  editor.on('ImageMenuClick', () => {
    // 你点击了图片菜单
  });
}

const handleChange = (editor: any) => {
  const context = editor.getHtml();
  emits('update:value', context)
}

</script>

<style scoped lang="scss">
@import '@wangeditor/editor/dist/css/style.css'; // 引入 css
</style>